<template>
	<view class="app" :class="{overhidden: list.length === 0}">
		<!-- 头部 -->
		<page-header 
			:keyword="keyword" 
			:listType="listType" 
			:sourcePage="sourcePage"
			@delKeyword="delKeyword" 
			@changeListType="changeListType"
		></page-header>
		<!-- 顶部筛选 分类栏 -->
		<view class="top" :style="{top: navigationBarHeight + statusBarHeight + 'px'}">
			<!-- 排序 -->
			<view class="sort-bar ">
				<!-- #ifdef MP -->
				<view class="btn right">
					<text 
						class="mix-icon"
						:class="listType === 'column' ? 'icon-hengxiangliebiao' : 'icon-shuxiangliebiao'"
						@click="changeListType"
					></text>
				</view>
				<!-- #endif -->
			</view>

		</view>
		<mescroll-body
			ref="mescrollRef" 
			@init="mescrollInit" 
			:top="headerHeight" 
			@down="downCallback" 
			:up="upOption" 
			@up="loadList" 
		>
			<product-list ref="productList" :list="list" :listType="listType"></product-list>
		</mescroll-body>
		<!-- #ifdef MP-WEIXIN -->
		<mix-load-more :status="loadingType"></mix-load-more>
		<!-- #endif -->
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	import pageHeader from './components/list-page-header'
	import MescrollBody from "@/components/mescroll-uni/mescroll-body.vue"
	import MescrollMixin from "@/components/mescroll-uni/mescroll-mixins.js";
	import productList from './components/product-list';
	import {searchCourse} from '@/common/js/api';
	export default {
		components: {
			pageHeader,
			MescrollBody,
			productList
		},
		mixins: [MescrollMixin], 
		data() {
			return {
				sourcePage: '', //来源页 主要用来判断是否来自搜索页
				listType: 'row', //列表类型 column竖向列表 row 横向列表
				sortList: [],
				isHot: 0,//热门推荐
				keyword: '',
				cateList: [], //分类列表
				curCateItem: {}, //当前分类
				list: [], //商品列表
				listNum:5,
				loadType:'refresh',
				listLoading:false,
				upOption:{
					auto: false, // 不自动加载
					page: {
					 	num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
					 	size: 5 // 每页数据的数量
					},
					noMoreSize: 4, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				},
			}
		},
		computed: {
			statusBarHeight(){
				return this.systemInfo.statusBarHeight
			},
			navigationBarHeight(){
				return this.systemInfo.navigationBarHeight;
			},
			headerHeight(){
				return 750 / uni.upx2px(750) * (this.navigationBarHeight + this.statusBarHeight) + 96;
			},
		},
		onLoad(options) {
			this.isLoading = true;
			this.sourcePage = options.sourcePage || '';
			this.keyword = options.keyword || ''; //搜索关键字
			this.prePage = options.prePage; //来源页 主要用于区分是否来自搜索页面
			//热门推荐
			this.isHot = options.isHot || 0;
		},
		onReady() {
			// this.calcCateRect();
		},
		methods: {

			//加载产品列表
			async loadList(e){
				console.log(e);
				this.mescroll.removeEmpty();
				const {keyword} = this;
				this.loadType = e.num === 1 ? 'refresh' : 'add';
				if(this.loadType==='add'){
					this.listNum = this.listNum + 5; 
				}else{
					this.listNum = 5;
					this.listLoading = false
				}
				const courseObj = {courseName:keyword}
				if( this.loadType==='refresh' || this.listLoading===false){
					const res = await searchCourse(courseObj)
					if(res.code===200){
						if(res.data.length>this.listNum){
							this.list = res.data.slice(0,this.listNum)
							console.log(this.list);
						}else{
							this.list = res.data
							this.listLoading = true
							this.loadingType = 2
						}
					}
				}
				this.isLoading=false
				 setTimeout(()=>{
				 	 this.mescroll.endSuccess(); //结束加载状态
				 }, 1000)
				
			},

			mescrollInit(mescroll){
				this.mescroll = mescroll;
				setTimeout(()=>{
					this.refreshList();
				}, 10)
			},
			//刷新列表
			refreshList(){
				this.mescroll.resetUpScroll(false)
				this.isLoading = true;
			},
			
			//删除搜索关键字
			delKeyword(){
				this.keyword = '';
				this.refreshList();
			},
			//修改列表显示方式
			changeListType(){
				this.listType = this.listType === 'column' ? 'row' : 'column';
			}
		}
	}
</script>

<style>
	page{
		background-color: #f8f8f8;
	}
</style>
<style scoped lang="scss">
	.app{
		/* #ifndef MP */
		&.overhidden{
			height: 100vh;
			overflow: hidden;
		}
		/* #endif */
	}
	/deep/ .mix-empty .default{
		padding-top: 38vh;
		/* #ifdef H5 */
		padding-top: 34vh;
		/* #endif */
	}
	.top{
		position: fixed;
		left: 0;
		width: 100%;
		z-index: 95;
		background-color: #fff;
	}
	.sort-bar{
		justify-content: space-around;
		height: 76rpx;
		padding: 4rpx 0 4rpx 4rpx;
		/* #ifdef MP */
		padding-left: 10rpx;
		/* #endif */
		background-color: #fff;
		position: relative;
		z-index: 1;
		.icon-wrap{
			// display: flex;
			flex-direction: column;
			padding-left: 8rpx;
		}
		.mix-icon{
			float: right;
			font-size: 14rpx;
			color: #bbb;
			right: 10rpx;

		}
		.btn{
			height: 68rpx;
			padding-left: 16rpx;
			padding-right: 20rpx;

			.icon-hengxiangliebiao, .icon-shuxiangliebiao{
				font-size: 40rpx;
				color: #333;
			}
		}
	}
	.cate-bar:after{
		border-color: #f5f5f5;
	}
	.cate-wrap{
		flex-wrap: nowrap;
		height: 96rpx;
		padding-bottom: 4rpx;
		
		.fill-view{
			flex-shrink: 0;
			width: 20rpx;
			height: 20rpx;
			
			&:last-child{
				width: 10rpx;
			}
		}
		.item{
			flex-shrink: 0;
			height: 58rpx;
			padding: 0 28rpx;
			margin-right: 20rpx;
			font-size: 22rpx;
			color: #333;
			text-align: center;
			line-height: 58rpx;
			background-color: #f5f5f5;
			border-radius: 100px;
		}
		.active{
			color: $base-color;
			background-color: #fff8f4;
			font-weight: 700;
		}
	}
	.listLoading{
		margin-top: 15rpx;
		font-size: 24rpx;
		color: #82939C;
	}
</style>
